<template>
	<div class="system_role_type">
		<el-input size="medium" prefix-icon="el-icon-search" placeholder="输入关键字进行过滤" clearable v-model="filterText" />
		<el-checkbox-group v-model="checkedType" @change="handleCheckboxChange">
			<el-checkbox v-for="(item, index) in roleTypeList" :key="index" :label="item.deValue">
				{{ item.deName }}
				<el-dropdown size="medium" @command="handleCommandEvent($event, item)">
					<el-button type="text" icon="el-icon-more"></el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item icon="el-icon-edit" command="edit">修改</el-dropdown-item>
						<template v-if="item.deValue === '1'">
							<el-dropdown-item icon="el-icon-delete" command="del" disabled>删除</el-dropdown-item>
						</template>
						<el-dropdown-item v-else icon="el-icon-delete" command="del">删除</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-checkbox>
		</el-checkbox-group>
		<el-button class="added" type="primary" size="medium" icon="el-icon-plus" @click="handleAddedDictDetail()">添加角色类型</el-button>
	</div>
</template>

<script>
import Vue from 'vue';
import lodash from 'lodash';
import { addedDictDetail, updateDictDetail, deleteDictDetail } from '@/api/system/tbSysDictDetail';
export default {
	data() {
		return {
			roleTypes: [],
			filterText: '',
			checkedType: []
		};
	},
	computed: {
		roleTypeList() {
			return this.roleTypes.filter((item) => {
				return item.deName.indexOf(this.filterText) != -1;
			});
		}
	},
	watch: {
		checkedType(arr) {
			this.$emit('change', arr[0]);
		}
	},
	mounted() {
		this.getRoleTypeData();
	},
	methods: {
		//获取角色类型
		async getRoleTypeData() {
			let result = await this.$store.dispatch('getEnumByCode', 'TB_SYS_USER_TYPE');
			this.roleTypes = result.value || [];
		},

		//选择角色类型
		handleCheckboxChange(arr) {
			this.checkedType = arr.slice(-1);
		},

		//添加枚举数据
		handleAddedDictDetail() {
			this.$prompt('新增角色类型名称为：', '新增角色类型', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				beforeClose: async (action, instance, done) => {
					if (action === 'confirm') {
						let inputValue = instance.inputValue;
						instance.cancelButtonLoading = true;
						await this.addedDictDetail(inputValue);
						instance.cancelButtonLoading = false;
					}
					done();
				}
			}).catch(() => {});
		},

		//添加枚举数据请求
		async addedDictDetail(deName) {
			let datas = lodash.maxBy(this.roleTypes, 'deValue');
			let deValue = !datas ? 1 : parseInt(datas.deValue) + 10;
			let params = { dictId: datas.dictId, deName, deValue };
			let result = await addedDictDetail(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('添加成功');
				this.getRoleTypeData();
			}
		},

		//枚举数据操作
		handleCommandEvent(command, data) {
			if (command === 'edit') {
				this.handleUpdateDictDetail(data);
			} else if (command === 'del') {
				this.handleDeleteDictDetail(data);
			}
		},

		//修改枚举数据
		handleUpdateDictDetail(data) {
			this.$prompt(`修改角色类型名称<font color="#f00">【${data.deName}】</font>为：`, '修改角色类型', {
				dangerouslyUseHTMLString: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputValue: data.deName,
				beforeClose: async (action, instance, done) => {
					if (action === 'confirm') {
						let deName = instance.inputValue;
						let params = { ...data, deName };
						instance.cancelButtonLoading = true;
						await this.updateDictDetail(params);
						instance.cancelButtonLoading = false;
					}
					done();
				}
			}).catch(() => {});
		},

		//修改枚举数据请求
		async updateDictDetail(params) {
			let result = await updateDictDetail(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('修改成功');
				this.getRoleTypeData();
			}
		},

		//删除角色类型
		handleDeleteDictDetail(data) {
			this.$confirm(`此操作将永久删除角色类型<font color="#f00">【${data.deName}】</font>, 是否继续?`, '删除角色类型', {
				dangerouslyUseHTMLString: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				beforeClose: async (action, instance, done) => {
					if (action === 'confirm') {
						instance.cancelButtonLoading = true;
						await this.deleteDictDetail(data.id);
						instance.cancelButtonLoading = false;
					}
					done();
				}
			}).catch(() => {});
		},

		//删除枚举数据
		async deleteDictDetail(id) {
			let result = await deleteDictDetail(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除成功');
				this.getRoleTypeData();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.system_role_type::v-deep {
	display: flex;
	flex-direction: column;
	min-width: 225px;
	overflow: hidden;
	width: 18%;
	border-right: solid 1px #ebeef5;
	.el-input__inner {
		border: none;
		border-radius: 0;
		border-bottom: solid 1px #ebeef5;
	}
	.el-checkbox-group {
		display: flex;
		flex-direction: column;
		border-bottom: solid 1px #ebeef5;
		overflow: hidden;
		flex: 1;
	}
	.el-checkbox {
		margin: 0;
		padding: 12px 6px 12px 16px;
		&:hover {
			background-color: #f5f7fa;
		}
		&.is-checked {
			font-weight: bold;
			background-color: var(--primary-background-hover);
		}
		.el-button {
			padding: 0 8px;
		}
		.el-checkbox__input {
			display: none;
		}
		.el-checkbox__label {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 15px;
			padding: 0;
			flex: 1;
		}
	}
	.el-button.added {
		margin: 12px;
	}
}
</style>
